<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div id="ep1">
            <span id="content">彪悍的人生不需要解释</span>
            <input type="text" id="input" value="彪悍的人生不需要解释" />
            <input type="button" id="save" value="Save">
            <input type="button" id="cancel" value="Cancel">
        </div>
    </div>
</body>
<script>
    // js 来切换现实/隐藏
    const save = document.getElementById('save');
    const cancel = document.getElementById('cancel');
    const input = document.getElementById('input');
    const span = document.getElementById('content');
    // DOM 动态样式
    save.style.display = 'none';
    cancel.style.display = 'none';
    input.style.display = 'none';
    setTimeout(() => {
        content.style.display = 'none';
        save.style.display = 'inline';
        cancel.style.display = 'inline';
        input.style.display = 'inline';
    }, 3000)
</script>

</html>